<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{width: 200px;height:200px;background: red;margin: 50px;padding: 20px;}
        .xbox{width:100px;height:100px;background: yellow;}
    </style>
</head>
<body style="height:1000px;">
    <div id="box">
        <div class="xbox"></div>
    </div>
</body>
<script>
    // var obox = document.getElementById("box")

    // obox.onmousedown = function(eve){
        // console.log(eve);

        // 相对于当前元素（事件目标）的坐标
        // console.log(eve.offsetX, eve.offsetY);
        
        // 相对于页面可视区域的坐标
        // console.log(eve.clientX, eve.clientY);
        
        // 相对于页面的坐标
        // console.log(eve.pageX, eve.pageY);
        
        // 相对于显示器的坐标
        // console.log(eve.screenX, eve.screenY);

        // 事件目标：触发事件的元素
        // console.log(eve.target);     // 正常浏览器
        // console.log(eve.srcElement); // IE低版本

        // 事件源：绑定事件的元素
        // console.log(this);

        // console.log(this === eve.target);

        // 事件类型
        // console.log(eve.type);

        // 0左，1中，2右
        // console.log(eve.button);

        // 1左，2右
        // console.log(eve.buttons);

    // }
</script>
</html>